<template>
    <div class="title"
        :style="{ background: isBogBox ? `url(${backPic}) no-repeat` : '', backgroundSize: isBogBox ? '100% 100%' : '' }">
        <p>{{ title }}</p>
        <div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        // 是否大盒子，使用大背景
        isBogBox: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            backPic: require('../../assets/images/zhangzi/tongji/big-back.png')
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    width: 100%;
    height: 3.8rem;
    background: url('../../assets/images/zhangzi/home/title-bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;

    p {
        font-size: 2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        padding-left: 2.1rem;
    }
}
</style>